<nz-descriptions nzTitle="项目情况" nzBordered [nzExtra]="nzExtra">
  <nz-descriptions-item nzTitle="Product">{{project?.projectName}}</nz-descriptions-item>
  <nz-descriptions-item nzTitle="ID" [nzSpan]="2">{{project?.pid}}</nz-descriptions-item>
  <nz-descriptions-item nzTitle="Status">
    <nz-badge *ngIf="project?.enable === '1'" nzStatus="processing" nzText="Running"></nz-badge>
    <nz-badge *ngIf="project?.enable !== '1'" nzStatus="default" nzText="Stopped"></nz-badge>
  </nz-descriptions-item>
  <nz-descriptions-item nzTitle="创建时间" [nzSpan]="2">{{project?.createTime}}</nz-descriptions-item>
  <nz-descriptions-item nzTitle="文档">
    {{project?.countDocument| number}}
  </nz-descriptions-item>
  <nz-descriptions-item nzTitle="SQL" [nzSpan]="2">
    {{project?.countSql| number}}
  </nz-descriptions-item>
  <nz-descriptions-item nzTitle="备注" [nzSpan]="3">
    <form nz-form [formGroup]="remarkForm" nzLayout="vertical">
      <nz-form-item>
        <nz-form-control>
          <nz-textarea-count [nzMaxCharacterCount]="remarkMaxLength">
            <textarea class="remark-textarea" rows="4" formControlName="remark" nzBorderless nz-input></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>
    </form>
    <button nz-button [disabled]="!remarkForm.valid || !project?.pid"
            (click)="saveRemark()">保存
    </button>
  </nz-descriptions-item>
</nz-descriptions>

<ng-template #nzExtra>
  <button nz-button nzType="primary" (click)="cloneModal = true">clone from</button>
</ng-template>

<nz-modal [nzVisible]="cloneModal" (nzOnCancel)="cloneModal=false" nzTitle="选择要复制的项目"
          [nzStyle]="{ width: '1000px' }" [nzFooter]="null">
  <ng-container *nzModalContent>
    <app-project-selection (cancel)="cloneModal = false" [disable]="[this.project?.pid]"
                           (success)="doClone($event)"></app-project-selection>
    <nz-alert nzType="error" nzMessage="这个操作会覆盖项目现有的sql与产品数据,希望您清楚这样做的后果" nzShowIcon></nz-alert>
  </ng-container>
</nz-modal>

<nz-divider nzPlain nzText="产品列表"></nz-divider>

<div nz-row class="operation-button-group" [nzGutter]="24">
  <div nz-col [nzXs]="8" [nzSm]="8" [nzSpan]="8" class="buttons">
    <button nz-button nzType="primary" (click)="addProductDialog()">添加产品</button>
  </div>
</div>

<nz-table [nzData]="configProducts" nzSize="small" [nzFrontPagination]="false" nzTableLayout="fixed"
          [nzLoading]="loadingProducts" [nzLoadingDelay]="300" [nzScroll]="{y:'250px'}">
  <thead class="product-table-head">
  <tr>
    <th [nzWidth]="'20%'"></th>
    <th [nzWidth]="'70%'"></th>
    <th [nzWidth]="'10%'"></th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let p of configProducts">
    <td>{{p.productName}}</td>
    <td [nzEllipsis]="true" [nzTooltipTitle]="p.remark" nzTooltipTrigger="click" nzTooltipPlacement="top"
        nz-tooltip>{{p.remark}}</td>
    <td>
      <button nz-button nzType="link" nzSize="small" nz-popconfirm [nzPopconfirmTitle]="'确认删除产品:'+p.productName+'?'"
              (nzOnConfirm)="deleteProduct(p.pid)">
        <i nz-icon nzType="delete" nzTheme="outline"></i>delete
      </button>
    </td>
  </tr>
  </tbody>
</nz-table>

<nz-modal [nzVisible]="productDialog" nzTitle="选择产品" (nzOnCancel)="dialogClose()" (nzOnOk)="handleOk()"
          [nzBodyStyle]="{maxHeight:'500px',overflow:'auto'}">
  <ng-container *nzModalContent>
    <nz-table class="product-table" #smallTable [nzData]="computedProducts()" nzSize="small" [nzFrontPagination]="false"
              [nzLoading]="loading" [nzLoadingDelay]="300">
      <tbody>
      <tr *ngFor="let data of smallTable.data" (click)=" data.selected = !data.selected"
          [ngClass]="{'selected-product':data.selected}">
        <td>{{ data.productName }}</td>
      </tr>
      </tbody>
    </nz-table>
  </ng-container>
</nz-modal>
